class Loading {
    constructor() {
        this.loadingDiv = $('<div id="loading" class="loading"></div>').css({
            'position': 'fixed',
            'top': 0,
            'left': 0,
            'right': 0,
            'bottom': 0,
            'display': 'none',
            'justify-content': 'center',
            'align-items': 'center',
            'z-index': 1000,
        });
        this.loadingSpinner = $('<div class="loading-con"></div>').css({
            'margin-top': '20px',
        });
        this.image=$('<img class="imageBox">').css({
            'margin': '10px auto',
        });
        this.animation=$('<div class="loader"></div>').css({
            'height': '20px',
            'margin': '0 auto',
            '-webkit-mask': 'linear-gradient(90deg,#000 70%,#0000 0) 0/10%',
        });
        this.font=$('<div class="text"></div>').css({
            'text-align': 'center',

        });

        this.loadingSpinner.append(this.image);
        this.loadingSpinner.append(this.animation);
        this.loadingSpinner.append(this.font);
        this.loadingDiv.append(this.loadingSpinner);
        $('body').append(this.loadingDiv);
    }
    timeShow(time=1000,title="加载中，请稍后..."){
        this.loadingSpinner.find('.text').text(title);
        this.loadingDiv.show();
        setTimeout(()=>{
            this.loadingDiv.hide();
        },time)
    }
    // option={
    //         opacity:''透明度
    //         time:'' 关闭时间
    //         automatic：'' 是否自动关闭
    //         title:''文字内容
    //         fontColor:''文字颜色
    //         fontSize:''文字大小
    //         loadingColor:''加载颜色
    //         animationTime:''加载动画速度
    //         animationW:''加载动画宽度
    //         animationH:''加载动画高度
    //         spacing:''间距，
    //         imageShow:''图片是否显示，
    //         imageUrl:''图片
    //         imageW:'',图片宽
    //         imageH:'',图片长
    // }
    show = (options) => {
        this.loadingDiv.show();
        this.loadingDiv.css({
            'background': `rgba(0, 0, 0, ${options.opacity || 0.5})`,
            'display': 'flex',
        });
        this.loadingDiv.find('.text').text(options.title || '加载中，请稍后...');
        this.loadingDiv.find('.imageBox').attr('src', options.imageUrl || '');
        if (options.imageShow || false){
            this.loadingDiv.find('.imageBox').show()
        }else {
            this.loadingDiv.find('.imageBox').hide()
        }
        this.loadingDiv.find('.imageBox').css({
            'width':options.imageW || '100px',
            'height':options.imageH || '100px',
        })
        this.loadingDiv.find('.loader').css({
            'width': options.animationW+'px' || '150px',
            'height': options.animationH+'px' || '20px',
            'background':`linear-gradient(${options.loadingColor || '#33cabb'} 0 0) 0/0% no-repeat #ddd`,
            'animation':` l4 ${options.animationTime || 2}s infinite steps(12)`
        })
        this.loadingDiv.find('.text').css({
            'color':options.fontColor || '#fff',
            'margin-top':options.spacing+'px' || '20px',
            'font-size':options.fontSize+'px' ||'18px'
        })
        if (options.automatic || false){
            setTimeout(()=>{
                this.loadingDiv.hide();
            },options.time || 2000)
        }
    }

    hide = () => {
        this.loadingDiv.hide();
    }
}
